<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta charset="utf-8">
	<title>恒铸智能柜管理平台</title>
	<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			<meta name="viewport"
				content="width=device-width, initial-scale=1, maximum-scale=1">
				<meta name="apple-mobile-web-app-status-bar-style" content="black">
					<meta name="apple-mobile-web-app-capable" content="yes">
						<meta name="format-detection" content="telephone=no">
							<link rel="stylesheet"
								href="${pageContext.request.contextPath}/resources/layui/css/layui.css"
								media="all" />
							<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/layui-formSelects-master/dist/formSelects-v4.css" />
							<script type="text/javascript"
								src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
							<script type="text/javascript"
								src="${pageContext.request.contextPath}/resources/js/cacheUserInfo.js"></script>
</head>
<style>
.none {
	display: none;
}
</style>
<body style="margin-top: 20px;">
	<div class="layui-form-mid layui-word-aux" style="margin-left: 100px;">
		<g style="color: red!important;padding:5px;">*</g>
		为必填选项
	</div>
	<form class="layui-form">
		<div class="layui-form-item">
			<label class="layui-form-label">储物柜</label>
			<div class="layui-input-inline">
			<select  xm-select="select1" xm-select-search="" name="caseNo">
                <c:forEach items="${caseNoList }" var="caseNoList" varStatus="xh">
                	<option value="${caseNoList.caseNo }" >
                		<c:if test="${!empty caseNoList.place}">${caseNoList.place }<c:if test="${!empty caseNoList.caseNoBuy}">&nbsp;${caseNoList.caseNoBuy}号柜</c:if></c:if>
                		<c:if test="${empty caseNoList.place}">${caseNoList.caseNo }</c:if>
                	</option>
                </c:forEach>
            </select>
            
				<!-- <input type="text" class="layui-input caseNo" name="caseNo"
					lay-verify="required" placeholder="请输入储物柜ID"> -->
			</div>
			<div class="layui-form-mid layui-word-aux">*</div>
		</div>

		<style>
.label {
	padding: 2px 5px;
	background: #5FB878;
	border-radius: 2px;
	color: #fff;
	display: block;
	line-height: 20px;
	height: 20px;
	margin: 2px 5px 2px 0;
	float: left;
}

.label:hover {
	color: white;
}

.label i:hover {
	background-color: #009E94;
	border-radius: 2px;
}

.layui-form-select dl dd:hover {
	background-color: #5FB878;
	color: white;
}

.AD {
	width: 210px;
	margin-left: 40px;
	overflow-y: auto;
	max-height: 200px;
	border: 1px solid #5fb878;
	border-radius: 6px;
	padding: 1px 2px;
}
.layui-form-item .layui-input-inline {
    width: 250px;
}
</style>
		<div class="layui-form-item">
			<label class="layui-form-label">已选择广告:</label>
			<div class="AD"></div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">选择广告</label>
			<div
				class="layui-input-inline fileId layui-form-select layui-form-selected">
				<input type="text" class="layui-input" placeholder="输入或选择广告"
					autocomplete="off">
					<dl style="display: none;"></dl>
			</div>
			<div class="layui-form-mid layui-word-aux">*</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">选择公司</label>
			<div class="layui-input-inline">
				<select class="adUrl" name="compId" lay-verify="required">
					<c:forEach items="${compList }" var="list">
						<option value="${list.compId }">${list.compName }</option>
					</c:forEach>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">描述</label>
			<div class="layui-input-inline">
				<input type="text" class="layui-input des" name="des"
					placeholder="请输入位置等描述">
			</div>
		</div>
		<div class="layui-form-item" style="margin-left: 120px;">
			<a class="layui-btn" lay-submit lay-filter="addAd" type="sumbit">立即提交</a>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</form>
	<pre id="tagData" class="none" value="">${list}</pre>

</body>
<script type="text/javascript">

	//全局定义一次, 加载formSelects
	layui.config({
	    base: '${pageContext.request.contextPath}'+'/resources/layui/layui-formSelects-master/src/' //此处路径请自行处理, 可以使用绝对路径
	}).extend({
	    formSelects: 'formSelects-v4'
	});
	
	 var tagData = null;
	    var tagData1 = null;
	  layui.use(['layer','form','jquery','formSelects'], function(){
		    var form = layui.form,
		        layer = parent.layer === undefined ? layui.layer : top.layer
		        $ = layui.jquery
		        ,selectM = layui.selectM,
		        formSelects = layui.formSelects;
		    
		    tagData = $.parseJSON($("#tagData").html())
		    
		    $(".AD").parent().hide();
			
		    //获取当前广告
		    $(".fileId").on("click","dl dd",function(){
		    	var id = $(this).attr("value");
				$(".AD").append('<a href="javascript:;" class="label"><span lay-value="64">'+$(this).html()+'</span><input type="hidden" name="fileIds" id="'+$(this).html()+'" value="'+id+'"/><i class="layui-icon close">ဆ</i></a>')
				$(".AD").parent().show();
				for(var i=0;i<tagData.length;i++){
					if(tagData[i].id == id){
						tagData.splice(i,1);
					}
				}
				$(".fileId dl").hide();
				$(".fileId input").val("");
			})
			
			function AD(name,id){
	            this.name=name;
	            this.id=id;
            }
		    
		 	//删除当前广告
			$(".AD").on("click",".close",function(){
				$(this).parent().remove();
				var id = $(this).parent().children("input").val();
				var text = $(this).parent().children("input").attr("id");
				tagData.push(new AD(text,id));
				if($(".close").length == 0){
					$(".AD").parent().hide();
				}
			})
			
			//筛选
		    $(".fileId input").on("input propertychange",function(){
		    	$(".fileId dl dd").remove();
		    	$(".fileId dl").hide();
	    		if(tagData.length>0){
	    			$(".fileId dl").show();    		
	    			var sear = new RegExp($(this).val())
		    		for(var i=0;i<tagData.length;i++){
		    			if(sear.test(tagData[i].name)){
			    			$(".fileId dl").append('<dd value="'+tagData[i].id+'">'+tagData[i].name+'</dd>')
		    			}
		    		}
	    		}
		   	})	
		   	
		   	//隐藏
		   	$(document).click(function(){
				$(".fileId dl").hide();
			});
		 	
		 	//显示没被选择的
			$(".fileId input").click(function(event){
				$(".fileId dl dd").remove();
		    	if(tagData.length==0){
					$(this).val("暂无广告")
		    	}else{
			    	$(".fileId dl").show()
		    	}
		    	for(var i=0;i<tagData.length;i++){
		    		$(".fileId dl").append('<dd value="'+tagData[i].id+'">'+tagData[i].name+'</dd>')
	    		}
				event.stopPropagation();
			});
		 //添加操作
	    form.on('submit(addAd)',function(data){	
	    	if(data.field.fileIds!=null && data.field.fileIds!=""){
			     $.post("/publish/addAdvertise",$('form').serialize(),function(rest){
			    	if(rest.success){
			    		layer.msg("添加成功");
			    		parent.window.location.reload();
			    	}else{
			    		layer.msg(rest.message);
			    	}
			   	 }) 
	    	}else{
	    		layer.msg("请选择广告");
	    	}
		 })
	})
</script>
</html>